﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    //IE是兼容性最高的渲染，布局方式-适应性
    //viewport是响应式的布局
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>bootstrap速览</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <header class="container-fluid">//百分百宽度
        <div class="col-md-4"><h1>九江学院</h1></div>
        <div class="col-md-8"><img src="" alt="九江学院" /></div>    
    </header>
    
    <nav class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
            <li><a href="#">新闻速递</a></li>
            <li><a href="#">学院活动</a></li>
            <li><a href="#">最美教师</a></li>
            <li><a href="#">学院招生</a></li>
        </ul>
    </nav>

    <div class="container-fluid">
        <mian class="col-md-9">
            <section class="row">
                <h2>优秀教师</h2>
                <p>优秀教师图片轮播展示</p>
            </section>
            <section class="row">
                <h2>优秀学生</h2>
                <article class="col-md-6">
                    <h3>优秀学生图片轮播展示</h3>
                    <p>在线联系</p>
                </article>
                <article class="col-md-6">
                    <h3>电子邮件</h3>
                    <p>通过电子邮件联系优秀学生</p>
                </article>
            </section>
        </mian>
        <aside class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item"><span class="glyphicon glyphicon-apple" aria-hidden="true">
                                            </span>&nbsp;<a href="#">信息学院</a></li>
                <li class="list-group-item"><span class="glyphicon glyphicon-book" aria-hidden="true">
                                            </span>&nbsp;<a href="#">医学院</a></li>
                <li class="list-group-item"><span class="glyphicon glyphicon-camera" aria-hidden="true">
                                            </span>&nbsp;<a href="#">管理学院</a></li>
                <li class="list-group-item"><span class="glyphicon glyphicon-home" aria-hidden="true">
                                            </span>&nbsp;<a href="#">理学院</a></li>
            </ul>
        </aside>
    </div>
    
   
    <footer class="container-fluid">
        <p>Copyright 2020 &copy;</p>
        <address >江西省九江市前进东路55号</address>
    </footer>

    <script src="Scripts/jquery-3.6.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>